<template>
	<div class="main">
		<div class="main-header" style="display: flex; justify-content: space-between">
			<div style="display: flex; flex: 1; flex-wrap: wrap">
				<el-input v-model="searchParam.keyword" placeholder="请输入用户名称或老师名称" style="width: 200px"></el-input>
				<el-input v-model="searchParam.title" placeholder="请输入课程名称" style="width: 200px; margin-left: 10px"></el-input>
				<el-input v-model="searchParam.search" clearable placeholder="家庭成员名称及手机号搜索" style="width: 200px; margin-left: 10px"></el-input>
				<!-- <el-select v-model="searchParam.type" placeholder="请选择用户角色" style="width:200px;margin-left: 10px;">
				    <el-option v-for="(item,index) in typeList" :key="index" :label="item.title" :value="item.id">
				    </el-option>
				</el-select>
				<el-select v-model="searchParam.status" placeholder="请选择认证状态" style="width:200px;margin-left: 10px;">
				    <el-option v-for="(item,index) in statusList" :key="index" :label="item" :value="index">
				    </el-option>
				</el-select> -->
				<div style="width: 340px; margin: 0 10px" class="ml-10">
					<el-date-picker clearable v-model="searchParam.time" value-format="timestamp" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
				</div>
				<!-- <el-date-picker style="width:340px" clearable class="ml-10" v-model="searchParam.search_time"
                    value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker> -->
				<div class="ml-10">
					<el-button type="primary" @click="searchinfo">搜索</el-button>
					<el-button type="primary" @click="reset">重置</el-button>
				</div>
			</div>
			<div style="display: flex">
				<!-- <el-button type="primary" @click="add()">添加</el-button> -->
				<!-- <el-upload-file :showfile="false" v-model="importindex"  @click="importExcel()"
				accept=".xlsx" style="margin: 0 10px;" title="导入"></el-upload-file> -->
				<!-- <eluploadfile v-if="$auth('import')" :auto-upload="false" :upload-clear="true" :show-file-list="false" @change="upload" :limit="1" :multiple="false" accept=".xls,.xlsx" class="ml-10">
				    <el-button type="primary" >导入</el-button>
				</eluploadfile> -->
				<!-- <el-button type="primary" @click="exportExcel">导出</el-button> -->
				<!-- 	<el-button style="margin-left: 10px;"  type="danger" @click="selectdel"
					:disabled="!selection.length">批量删除</el-button> -->
			</div>
		</div>
		<el-table ref="table" class="main-table" header-align="center" border :data="list" @selection-change="onSelectionChange" height="100%" row-key="id" header-cell-class-name="main-table-header" @row-click="onRowClick">
			<el-table-column type="selection" width="50"> </el-table-column>
			<el-table-column show-overflow-tooltip label="课程名称" prop="course_name"></el-table-column>
			<el-table-column show-overflow-tooltip label="用户名称" prop="username"></el-table-column>
			<el-table-column show-overflow-tooltip label="老师名称" prop="teacher_name"></el-table-column>
			<el-table-column show-overflow-tooltip label="学习成果(满分5)" prop="major"></el-table-column>
			<el-table-column show-overflow-tooltip label="作业方面(满分5)" prop="manner"></el-table-column>
			<el-table-column label="评价图">
				<template slot-scope="{ row }">
					<!-- <el-image v-for="(item,index) in row.img.split('|')" style="width:60px;height:60px" :src="item" :preview-src-list="[item]">
					</el-image> -->
					<el-image style="width: 60px; height: 60px" :src="row.img.split('|')[0]" :preview-src-list="[row.img.split('|')[0]]"> </el-image>
				</template>
			</el-table-column>
			<el-table-column show-overflow-tooltip label="评价内容" prop="content"> </el-table-column>
			<!-- <el-table-column label="是否匿名" width="70">
			    <template slot-scope="{row}">
			       <el-tag v-if="row.anonymity==1">否</el-tag>
				  <el-tag v-if="row.anonymity==2">是</el-tag>
			    </template>
			</el-table-column> -->
			<!-- <el-table-column v-if="$route.query.type" show-overflow-tooltip label="联系方式" prop="mass_mobile" width="120px"></el-table-column> -->
			<!-- <el-table-column show-overflow-tooltip label="联系电话" prop="mainPhone" ></el-table-column> -->
			<el-table-column label="创建时间" prop="createtime">
				<template slot-scope="{ row }">
					{{ row.create_time | formatDate }}
				</template>
			</el-table-column>
			<!-- <el-table-column label="操作">
				<template slot-scope="{row}">
					<el-button type="primary" @click.stop="add(row)">编辑</el-button>
					<el-button type="warning" @click.stop="add(row)">详情</el-button>
				</template>
			</el-table-column> -->
		</el-table>
		<el-pagination class="main-pagination" :current-page.sync="searchParam.page" :page-size="searchParam.limit" :total="searchParam.total" @current-change="onCurrentChange" layout="total,jumper,prev,pager,next"> </el-pagination>
		<el-dialog :title="title" :key="formDataStatus" :visible.sync="centerDialogVisible" @close="onDialogClose" width="60%">
			<add @close="close" :formData="userinfo" @search="addcommunity"></add>
		</el-dialog>
	</div>
</template>
<script>
// import companyCate from '@/components/company-cate.vue'
// import supervisorSelect from '@/components/supervisor-select.vue'auth
import add from "./components/add.vue"
import { imghttp, get, post, del } from "@/assets/js/http"
// import eluploadfile from '../../components/el-upload-file.vue'
export default {
	components: { add },
	data() {
		return {
			list: [],
			selection: [],
			addShow: false, //添加显示
			centerDialogVisible: false, //详情弹窗
			title: "", //弹窗标题
			userinfo: {}, //用户信息
			typeList: [
				{
					id: 1,
					title: "社区民警",
				},
				{
					id: 2,
					title: "综治巡逻队员",
				},
				{
					id: 3,
					title: "网格员",
				},
			], //角色1社区民警 2综治巡逻队员 3网格员
			statusList: ["未认证", "认证待审核", "认证通过", "认证驳回"], //认证状态 0未认证 1认证待审核 2认证通过 3认证驳回
			searchParam: {
				page: 1,
				limit: 20,
				total: 0,
				cadre_id: "",
				time: [],
				status: "",
				type: "",
				keyword: "",
				title: [],
			},
			searchParamCp: {
				status: "",
			},
			formDataStatus: false,
		}
	},
	created() {
		Object.assign(this.searchParam, this.$route.query ? this.$route.query : {})
		Object.assign(this.searchParamCp, this.$route.query ? this.$route.query : {})
		this.getList()
	},
	watch: {
		$route: {
			deep: true,
			handler() {
				this.reset()
			},
		},
	},
	methods: {
		//获取社区列表
		async getList() {
			this.$loading()
			// let { list,total } =

			await get({
				url: "/admin/project.TeacherCourse/course_eval",
				params: {
					...this.searchParam,
					...{
						server_type: this.$route.query.type ? 2 : 1,
						type: 2, //1学生评价2老师评价
						time: this.searchParam.time.length ? this.searchParam.time.map((item) => item / 1000) : "",
					},
				},
			}).then((res) => {
				this.list = res.data
				console.log(res)
				this.searchParam.total = res.total
				this.importindex = []
				this.$loading().close()
			})
		},
		//添加/编辑弹窗
		add(row) {
			if (row) {
				//编辑
				this.centerDialogVisible = true
				this.title = "编辑轮播图"
				get({
					url: "/admin/basic.Village/edit",
					params: {
						id: row.id,
					},
				}).then((res) => {
					this.userinfo = res.row
					this.userinfo.img = [
						{
							name: res.row.img,
							url: res.row.img,
						},
					]
					console.log(this.userinfo.img, "this.userinfo.img")
				})
			} else {
				//添加
				this.userinfo = {}
				this.centerDialogVisible = true
				this.title = "添加轮播图"
			}
			this.formDataStatus = true
		},
		//添加轮播图
		addcommunity(result) {
			const info = JSON.parse(JSON.stringify(result))
			info.img = info.img[0].url
			info.desc = ""
			console.log(info)
			if (info.id) {
				post({
					url: "/admin/basic.Village/edit",
					data: info,
				}).then((res) => {
					this.close()
					this.getList()
				})
			} else {
				post({
					url: "/admin/basic.Village/add",
					data: info,
				}).then((res) => {
					this.close()
					this.getList()
				})
			}
		},
		//关闭弹窗
		close() {
			this.centerDialogVisible = false
		},
		reset() {
			this.searchParamCp = this.$options.data().searchParam
			this.searchParam = this.$options.data().searchParam
			this.getList()
		},
		searchinfo() {
			this.searchParam.page = 1
			this.searchParam = {
				...this.searchParam,
				...this.searchParamCp,
			}
			this.getList()
		},
		onCurrentChange() {
			this.getList()
		},
		onRowClick(row) {
			this.$refs.table.toggleRowSelection(row)
		},
		onSelectionChange(selection) {
			this.selection = selection
		},
		selectdel() {
			this.$confirm(`此操作将永久删除该${this.selection.length}个评价, 是否继续?`, "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(async () => {
					let query = "?"
					for (let i = 0; i < this.selection.length; i++) {
						const item = this.selection[i]
						if (i > 0) {
							query += "&ids[]=" + item.id
						} else {
							query += "ids[]=" + item.id
						}
					}
					await del({
						url: "/admin/order.OrderComment/del" + query,
						successTip: true,
						loading: true,
					})
					this.getList()
				})
				.catch(() => {
					this.$refs.table.clearSelection()
				})
		},
		//导出
		async exportExcel() {
			this.$loading()
			let res = await get({
				export: true,
				url: "/admin/server.Appeal/export",
				params: {
					...this.searchParamCp,
					...{
						time: this.searchParam.time.length ? this.searchParam.time.map((item) => item / 1000) : "",
					},
				},
			})
			let a = document.createElement("a")
			var url = URL.createObjectURL(res)
			a.href = url
			a.click()
			this.$loading().close()
		},
		//导入
		async upload({ raw }) {
			this.$loading({
				text: "导入中 请等待...",
			})
			console.log(raw)
			await imghttp({
				url: "/admin/basic.Masses/import",
				data: {
					file: raw,
				},
				successTip: true,
			})
			this.getList()
			this.$loading().close()
		},
		onDialogClose() {},
	},
}
</script>

<style>
.el-date-editor .el-range-separator {
	padding: 0;
}
</style>
